<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 事件循环机制
        // 主线程运行时，产生堆和栈，栈中的代码调用各种外部api,
        // 异步操作执行完成后，就在消息队列中排队，只要执行栈中的代码执行完毕
        // 主线程就会去读取消息队列，依次执行那些异步任务所对应的回调函

// EventLoop的理解
//1.Js是一门单线程非阻塞脚本语言、可以说他是一种对js异步任务的有序执行的一种机制
//2.每一个宏任务执行完毕都必须将当前的微任务队列清空
//3.主线程会不断重复上面步骤、直到执行完所有任务
//  异步任务又分为宏任务和微任务、这就造成了代码执行顺序:
//      (同步->微任务->dom渲染->nextTick->宏任务)




        //异步 ：微任务 宏任务    优先执行微任务
        //宏任务: setTimeout setInterval , ajax
        // 微任务 : then,asyncawait, nexttick
        setTimeout(()=>{
            console.log(100); //放异步队列
        },0)
        new Promise((resolve,reject)=>{
            resolve();  // 同步
        }).then(()=>{
            console.log(200); //异步 微任务
        })
        function f() {
            console.log(300);
        }
        async function f2(){
            await f(); // 同步
            console.log(400); // 异步 微任务
        }
        f2();//同步
    </script>
</body>
</html>